<template>
    <h1 class="mod-title">
        <span v-if="pay.type == 'wx'" class="ico_log ico-3"></span>
        <span v-else class="ico_log ico-4"></span>
    </h1>


    <div class="mod-ct">
        <div class="order"></div>

        <div style="margin-top: 10px;">
            <span style="color: red;">提示：{{notice}}</span>
        </div>

        <div class="amount" id="money">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥<span id="copyText" class="amount2">{{pay.price}}</span>元
            <span onclick="copy" style="font-size: 10px;color: darkcyan;">&nbsp;&nbsp;复制金额</span>
        </div>

        <div class="qrcode-img-wrapper" data-role="qrPayImgWrapper">
            <div data-role="qrPayImg" class="qrcode-img-area">
                <div class="ui-loading qrcode-loading" data-role="qrPayImgLoading" style="display: none;"></div>
                <div style="position: relative;display: inline-block;">
                <img id="imgCode" :src="pay.qrcode" style="width: 220px;" />
                </div>
            </div>
        </div>

        <div class="time-item" style="padding-top: 10px" v-if="type!='recharge'">
            <div class="time-item" id="msg">
                <h1 class="overtime">订单留言：<span>{{pay.remarks}}</span></h1>
            </div>

            <div class="time-item">
                <h1>订单号:<span>{{pay.code}}</span></h1>
            </div>

            <strong id="hour_show"><s id="h"></s>订单支付有效期</strong>
            <strong id="minute_show">{{minutes}}分</strong>
            <strong id="second_show">{{seconds}}秒</strong>
            <div class="time-item"></div>
        </div>

        <div class="tip">
            <div class="ico-scan"></div>
            <div class="tip-text">
            <p id="showtext">{{pay.type == 'wx' ? '打开微信[扫一扫]' : '打开支付宝[扫一扫]'}}</p>
            </div>
        </div>
    </div>
    <van-dialog 
        v-model:show="show" 
        :title="`￥${pay.price}元`" 
        show-cancel-button 
        :className="keyboardshow?'van-dialog-top':''"
        @confirm="confirmpay"
        @cancel="cancelpay"
    >
        <van-field 
            v-model="money"
            label="支付"
            name="money"
            placeholder="请填写金额"
            left-icon="gold-coin-o"
            required
            :rules="[{ required: true, message: '请填写金额' }]"
            clickable
            @touchstart.stop="keyboardshow = true"
        />
    </van-dialog>
    <van-number-keyboard
    v-model="money"
    :show="keyboardshow"
    :maxlength="10"
    @blur="keyboardshow = false"
    close-button-text="完成"
    theme="custom"
    :extra-key="['.']"
    :z-index="9999"
    />
</template>

<script setup>

    const {proxy} = getCurrentInstance()
    const type = proxy.$route.query.type??''
    const query = proxy.$route.query
    let business = proxy.$business
    let payid = proxy.$route.query.payid ?? 0
    let pay = ref({})
    let notice = ref('付款金额要与显示的金额一致，否则后果自负')
    const begintime = 1 * 60; //过期秒数
    const maxtime = ref(begintime); //过期秒数
    let timer = null //定时器变量
    let PayTimer = null; //检查支付状态
    const minutes = computed(() =>Math.floor(maxtime.value / 60))
    const seconds = computed(() =>Math.floor(maxtime.value % 60))
    onMounted(() => {
        PayInfo()
    })

    //查询支付记录
    const PayInfo = async () =>
    {
        let result = await proxy.$GET({url: '/order/pay', params: {payid}})
        if(result.code == 0)
        {
            showFailToast({
                message: result.msg,
                onClose: () => proxy.$router.go(-1)
            })
            return false
        }
        pay.value = result.data
        
        timer = setInterval(autoplay, 1000)
        PayTimer = setInterval(check, 3000)
    }
    //倒计时
    const autoplay = async() => 
    {
        if(maxtime.value > 0) //未结束
        {
        maxtime.value--;

        }else
        {
            let result = await proxy.$PUT({url:'/order/check',params:{payid}})
            if(result.code==1){
                //倒计时结束了
                clearInterval(timer)
                maxtime.value = begintime //恢复
                pay.value.qrcode  = '/assets/images/qrcode_timeout.png'

                //弹框结束
                showFailToast('订单已失效，请手动关闭页面，请重新下单')
                notice.value = '订单已失效，请手动关闭页面，重新下单'
            }
        }
    }
        const show = ref(false)
        const keyboardshow = ref(false)
        const money = ref()
    //检查支付状态
    const check = async () => 
    {
        var result = await proxy.$GET({url: '/order/check', params: {payid}})

        if(result.code == 0)
        {
            showFailToast(result.msg)
            clearInterval(PayTimer)
            clearInterval(timer)
            return false
        }else if(result.code == 1){
            clearInterval(timer)
            clearInterval(PayTimer)

            showSuccessToast({
                message: '支付成功',
                onClose: () => proxy.$router.push(`/order`)
            })
        }else{
            show.value = true
        }
    }
    const cancelpay = ()=>showFailToast("支付失败")

    const confirmpay = async()=>{
        let result = {}
        if(type=='live')
        {
            let query = proxy.$route.query
            result = await proxy.$PUT({
                url:'/live/pay',
                params:{payid},
                data:{money:money.value,...query}
            })
        }else if(type=='recharge'){
            result = await proxy.$PUT({
                url:'/business/recharge',
                params:{payid},
            })
        }else{
            result = await proxy.$PUT({
                url:'/order/pay',
                params:{payid},
                data:{money:money.value}
            })
        }
        if(result.code == 0)
        {
            showFailToast(result.msg)
            clearInterval(PayTimer)
            clearInterval(timer)
            return false
        }else if(result.code == 1){
            clearInterval(timer)
            clearInterval(PayTimer)
            if(type=='recharge'){
                showSuccessToast({
                message: '支付成功',
                onClose: () => proxy.$router.push('/business/pay')
            })
            }
            showSuccessToast({
                message: '支付成功',
                onClose: () => proxy.$router.push('/order')
            })
        }else{
            showFailToast(result.msg)
        }
    }
</script>


<style>
    @import url('/public/assets/css/Cashier.css');
    .van-dialog-top{
        top: 30%;
    }
</style>